<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端资源包上传</title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div style="margin-top: 10px">
    <h5>上传文件</h5>
    <input id="fileInput" type="file">
    <!--    <input id="fileInput" type="file" webkitdirectory>-->
    <button onclick="uploadDir()">上传文件</button>
</div>
<span>文件名：</span>
<div style="margin-top: 30px">
    <input type="text" id="doc">
    <button>选择文件</button>
    <input type="file" id="upload" onchange="getFile(value)"
           style="opacity: 0.5; margin-left: -74px; width: 74px;">
</div>
<script>
function uploadDir() {
  debugger
  let name = $('#fileInput').val();

  $.ajax({
    type: 'get',
    url: '/demo/uploadFile',
    data: {name},
    success: function (res) {
      debugger
      alert('登录成功')
    }
  })
}

function getFile(value) {
  // 获取文本框dom
  let doc = document.getElementById('doc');
  // 获取上传控件dom
  let upload = document.getElementById('upload');
  // 获取文件名
  let fileName = upload.files[0].name;
  // let filePath1 = upload.files[0].getAsDataURL();
  // 获取文件路径
  let filePath = upload.value;

  //
  upload.select();
  let filePath2 =document.selection.createRange().text;
  // 将文件名载入文本框
  doc.value = filePath2;
  console.log(fileName);
  console.log(filePath);
}

</script>
</body>
</html>
